import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import CustomizedSeparator from './CustomizedSeparator.vue';
import Embedded from './Embedded.vue';
import Horizontal from './Horizontal.vue';
import ImageFun from './ImageFun.vue';
import Limits from './Limits.vue';
import PixelModel from './PixelModel.vue';
import ReactiveImages from './ReactiveImages.vue';
import ReverseModel from './ReverseModel.vue';
import SeparatorSlot from './SeparatorSlot.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomizedSeparator</h5>
            <CustomizedSeparator />
          </div>
          <div class='block-'>
            <h5 class='title'>Embedded</h5>
            <Embedded />
          </div>
          <div class='block-'>
            <h5 class='title'>Horizontal</h5>
            <Horizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>ImageFun</h5>
            <ImageFun />
          </div>
          <div class='block-'>
            <h5 class='title'>Limits</h5>
            <Limits />
          </div>
          <div class='block-'>
            <h5 class='title'>PixelModel</h5>
            <PixelModel />
          </div>
          <div class='block-'>
            <h5 class='title'>ReactiveImages</h5>
            <ReactiveImages />
          </div>
          <div class='block-'>
            <h5 class='title'>ReverseModel</h5>
            <ReverseModel />
          </div>
          <div class='block-'>
            <h5 class='title'>SeparatorSlot</h5>
            <SeparatorSlot />
          </div>
        </div>
      );
    };
  },
});
